<{extends file="layout.tpl"}>

<{block name=css}>
<style type="text/css">
	.m-logoInfo-btn{ margin-top: 24px; }
	.groupTable{ margin-top: 20px; }
	.groupTable th, .groupTable td{ text-align: center; }
	#group{ text-align: right; }
	#addServer .modal-header{ background: #20A0FF; color: #fff;}

</style>
<{/block}>


<{block name=content}>
<section class="m-panel-box">
	<h4>服务器组信息</h4>
	<div class="m-panel-body">
		<div class="m-addServer-box">
			<button class="btn btn-md btn-info" data-toggle="modal" data-target="#addServer">添加服务器组</button>
		</div>
		<table class="table table-striped table-bordered table-hover groupTable">
			<thead>
				<tr>
					<th>名称</th>
					<th>描述</th>
					<th>服务器组成员</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		<div id="group"></div>
	</div>
</section>


<!-- Modal -->
<div class="modal fade" id="addServer">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">添加服务器组信息</h4>
      </div>
      <div class="modal-body">
      	<div class="m-form-item">
      		<label>服务器组名称:</label>
      		<input type="text" name="" class="form-control m-addServer-name" placeholder="请输入服务器组名称">
      	</div>
      	<div class="m-form-item">
      		<label>服务器组描述:</label>
      		<textarea class="form-control m-addServer-des"></textarea>
      	</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary sureAdd">确定</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      </div>
    </div>
  </div>
</div>
<{/block}>

<{block name=js}>
<script type="text/javascript">
var firstLoad = true;

$('.groupTable').delegate('.deleteServer', 'click', function(){
	var id = $(this).data('id');
	deleteServer(id);
})

$('.sureAdd').click(function(){
	var name = $('.m-addServer-name').val();
	var des = $('.m-addServer-des').val();
	ajaxObj('/serverGroup/addData', 'post', {group_name: name, group_description: des}, function(obj){
		if(obj.code == 1){
			layer.msg(obj.msg);
			$('#addServer').modal('hide');
			$('.m-addServer-name').val('');
			$('.m-addServer-des').val('');
			loadServerGroup(1);
		}
	})
})

	//加载服务器组列表
	function loadServerGroup(page){
		ajaxObj('/serverGroup/getGroupList', 'get', {page, pageSize: 10}, function(obj){
			var str = '';
			$(".groupTable tbody").html('');
			if(obj.num != 0){
				obj.group.map(function(data){
					str += `<tr>
										<td>${data.group_name}</td>
										<td>${data.group_description}</td>
										<td>${data.group_member}</td>
										<td>
											<a class="btn btn-xs btn-info" href="/serverGroup/groupDetails?id=${data.id}">详情</a>	
											<button class="btn btn-xs btn-danger deleteServer" data-id=${data.id}>删除</button>	
										</td>
									</tr>`

					if(firstLoad){
						firstLoad = false;
						layui.use(['laypage', 'layer'], function(){
						  var laypage = layui.laypage
						  ,layer = layui.layer;
						  
						  //总页数低于页码总数
						  laypage.render({
						    elem: 'group'
						    ,limit: 10
						    ,count: obj.num //数据总数	
						    ,theme: '#20A0FF'
						    ,jump: function(curr, first){
						    	!first && loadServerGroup(curr.curr);
						    }
						  });
						})
					}
				})
			}else{
				str += '<tr><td colspan="4">暂无信息</td></tr>'
			}
			$(".groupTable tbody").append(str);
		})
	}

	loadServerGroup();

	function deleteServer (id)
	{	
		var layer2 = layer.confirm('此操作不可撤回！', {icon: 2}, function(){
			ajaxObj('/serverGroup/delGroup', 'get', {id}, function(obj){
				if(obj.code == 1){
					layer.msg('操作成功！');
					layer.close(layer2);
					loadServerGroup(1);
				}else{
					layer.close(layer2);
					layer.msg(obj.msg);
				}
			})
		})
		
	}
</script>
<{/block}>